<template>
	<view class="page">
		<u-sticky>
			<view class="tab-list">
				<u-tabs lineColor="#32C59A" :activeStyle="{
						color: '#020202',
						fontWeight: 'bold'
					}" :list="tabs" @click="tabChange" :current="current"></u-tabs>
			</view>
		</u-sticky>
		<!-- 订单列表 -->
		<view class="order-list" v-if="list.length > 0">
			<view class="order-item" v-for="(item, index) of list" :key="index" @click="toDetail(item)">
				<view class="top-info">
					<view class="type">{{ item.serviceName }}</view>
					<view class="state" style="color: #ff290b;" v-if="item.status == 0">待付款</view>
					<view class="state" v-if="item.status == 1">待服务</view>
					<view class="state" style="color: #32C59A;" v-if="item.status == 2">服务中</view>
					<view class="state" v-if="item.status == 3">已完成</view>
					<view class="state" v-if="item.status == 99">已取消</view>
				</view>
				<view class="serve-time" v-if="item.treatmentTime">
					服务时间：
					<text>{{ item.treatmentTime }}</text>
				</view>
				<view class="serve-time" v-if="item.patientName">
					服务对象：
					<text>{{ item.patientName }}</text>
				</view>
				<view class="serve-user" v-if="item.hospitalName">
					就诊医院：
					<text>{{ item.hospitalName }}</text>
				</view>
				<view class="bottom-info" v-if="item.status != 99">
					<view class="pay-time" v-if="item.status == 0">
						支付剩余:
						<text>{{ item.overTime }}</text>
					</view>
					<view class="now-pay" v-if="item.status == 0" @click.stop="requestPay(item)">立即支付</view>
					<view class="cancel-pay" v-if="item.status == 1" @click.stop="cancel(item)">取消订单</view>
					<view class="cancel-pay" v-if="item.status == 3 && !item.isAppraisal && item.escortName"
						@click.stop="appraise(item)">评价</view>
				</view>
			</view>
		</view>
		<view class="empty-view" v-else>暂无订单</view>
	</view>
</template>

<script>
	import {
		getOrderPageList,
		getPayParams,
		cancelOrder
	} from '@/apis/request.js';
	export default {
		data() {
			return {
				current: 0,
				tabs: [{
						name: '全部'
					},
					{
						name: '待付款'
					},
					{
						name: '待服务'
					},
					{
						name: '服务中'
					},
					{
						name: '已完成'
					},
					{
						name: '退款中'
					},
					{
						name: '已退款'
					},
					{
						name: '已取消'
					}
				],
				parmes: {
					pageNo: 1,
					pageSize: 10,
					status: '',
					type: 0
				},
				total: 0,
				list: []
			};
		},
		onLoad(options) {
			this.current = options.current || 0;
			this.headLand();
		},
		onShow() {
			this.parmes.pageNo = 1;
			this.getList();
		},
		onReachBottom() {
			if (this.total > this.list.length) {
				this.parmes.pageNo++;
				this.getList();
			}
		},
		onUnload() {
			//卸载全部倒计时
			clearTimeout();
		},
		methods: {
			//获取列表
			getList() {
				getOrderPageList(this.parmes).then(res => {
					this.total = res.total;
					if (res.records.length > 0) {
						for (let x in res.records) {
							if (res.records[x].status == 0) {
								this.dinTime(res.records[x], x);
							}
						}
					}
					if (this.parmes.pageNo == 1) {
						this.list = res.records;
					} else {
						this.list = this.list.concat(res.records);
					}
					// console.log('列表', res)
				});
			},
			//倒计时任务
			dinTime(item, index) {
				let that = this;
				setTimeout(function() {
					if (that.current == 0 || that.current == 1) {
						if (new Date(item.payExpiredTime).getTime() < new Date().getTime()) {
							clearTimeout();
							that.parmes.pageNo = 1;
							that.getList();
						} else {
							item.overTime = that.showTimes(item.payExpiredTime);
							that.$set(that.list, index, item);
							that.dinTime(item, index);
						}
					}
				}, 1000);
			},
			tabChange(e) {
				this.current = e.index;
				this.headLand();
				this.parmes.pageNo = 1;
				this.getList();
			},
			toDetail(item) {
				clearTimeout();
				uni.navigateTo({
					url: '/pages/MinePages/order/orderDetail?orderId=' + item.id
				});
			},
			/**
			 * 请求支付
			 * @param {Object} order 订单数据
			 */
			requestPay(order) {
				let payType = 2;

				// #ifdef APP-PLUS
				payType = 1;
				// #endif

				getPayParams({
					orderId: order.id,
					payType: payType,
					source: 1,
					totalAmount: order.payAmount
				}).then(res => {
					this.callPay(res.wxPayRequest || {});
				});
			},
			/**
			 * 发起支付请求
			 * @param {Object} config 支付配置
			 */
			callPay(config) {
				// #ifdef MP-WEIXIN
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: config.timeStamp,
					nonceStr: config.nonceStr,
					package: config.packageValue,
					signType: config.signType,
					paySign: config.paySign,
					success: res => {
						clearTimeout();
						this.parmes.pageNo = 1;
						this.getList();
					},
					fail: err => {
						console.error('fail:' + JSON.stringify(err));
						this.$Toast('支付失败');
					}
				});
				// #endif

				// #ifdef APP-PLUS
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: {
						appid: config.appId,
						noncestr: config.nonceStr,
						package: config.packageValue,
						partnerid: config.partnerId,
						prepayid: config.prepayId,
						timestamp: config.timeStamp,
						sign: config.sign
					},
					success: res => {
						clearTimeout();
						this.parmes.pageNo = 1;
						this.getList();
					},
					fail: err => {
						console.error('fail:' + JSON.stringify(err));
						this.$Toast('支付失败');
					}
				});
				// #endif
			},
			//取消订单
			cancel(item) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否取消订单',
					success: function(res) {
						if (res.confirm) {
							cancelOrder({
								orderId: item.id
							}).then(res => {
								that.parmes.pageNo = 1;
								that.getList();
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//评论
			appraise(item) {
				clearTimeout();
				uni.navigateTo({
					url: '/pages/MinePages/order/evaluation?orderId=' + item.id + '&name=' + item.escortName + '&escortId=' +
						item.escortId
				});
			},
			headLand() {
				if (this.current == 0) {
					this.parmes.status = '';
				} else if (this.current == 1) {
					this.parmes.status = 0;
				} else if (this.current == 2) {
					this.parmes.status = 1;
				} else if (this.current == 3) {
					this.parmes.status = 2;
				} else if (this.current == 4) {
					this.parmes.status = 3;
				} else if (this.current == 5) {
					this.parmes.status = 90;
				} else if (this.current == 6) {
					this.parmes.status = 91;
				} else if (this.current == 7) {
					this.parmes.status = 99;
				}
			},
			// 倒计时
			showTimes(overTime) {
				overTime = overTime.replace(/\-/g, '/');
				var nowtime = new Date(), //获取当前时间
					endtime = new Date(overTime), //定义结束时间
					rutTime = '';
				var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
					leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
					lefth = Math.floor((lefttime / (1000 * 60 * 60)) % 24), //计算小时数
					leftm = Math.floor((lefttime / (1000 * 60)) % 60), //计算分钟数
					lefts = Math.floor((lefttime / 1000) % 60); //计算秒数
				if (leftd < 1) {
					rutTime = lefth + '小时' + leftm + '分钟' + lefts + '秒';
				} else {
					rutTime = leftd + '天' + lefth + '小时' + leftm + '分钟' + lefts + '秒';
				}
				return rutTime; //返回倒计时的字符串
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f2f2f2ff;
		height: 100%;
		min-height: 100vh;

		.tab-list {
			background-color: #fff;
		}

		.order-list {
			.order-item {
				margin-top: 20rpx;
				background-color: #fff;
				width: 750rpx;
				box-sizing: border-box;
				padding: 30rpx 30rpx 20rpx 30rpx;

				.top-info {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.type {
						font-size: 30rpx;
					}

					.state {
						font-size: 28rpx;
					}
				}

				.serve-time {
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #999999;

					text {
						color: #020202;
					}
				}

				.serve-user {
					margin: 14rpx 0 26rpx 0;
					font-size: 24rpx;
					color: #999999;

					text {
						color: #020202;
					}
				}

				.bottom-info {
					border-top: 2rpx solid #ececec;
					padding-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.pay-time {
						font-size: 22rpx;
						color: #020202;

						text {
							color: #ff290b;
						}
					}

					.now-pay {
						margin-left: 20rpx;
						width: 150rpx;
						height: 50rpx;
						line-height: 50rpx;
						border-radius: 25rpx;
						background-color: #32C59A;
						color: #fff;
						font-size: 26rpx;
						text-align: center;
					}

					.cancel-pay {
						margin-left: 20rpx;
						width: 150rpx;
						height: 50rpx;
						line-height: 50rpx;
						border-radius: 25rpx;
						color: #999999;
						font-size: 26rpx;
						text-align: center;
						border: 2rpx solid #dddddd;
					}
				}
			}
		}

		.empty-view {
			height: calc(100vh - 88upx);
		}
	}
</style>